<template>
    <div class="searchhot">
      <div class="search">
        <van-search class="vants"
                    background="#c44a3d"
                    placeholder="请输入搜索关键词"
                    show-action
                    shape="round"
                    v-model="value"
                    @input="seachr"
        >
          <div slot="action" class="quxiao" @click="onCancel">取消</div>
        </van-search>
      </div>

      <div class="angeshou">
        <span class="s1"><span>按歌手搜索</span><van-icon name="arrow" class="ic"/></span>

        <span class="s2">
          <span></span>
          <span class="si"></span>
          <span class="ss"></span>
        </span>
      </div>
      <div class="hot">
        <p>热门搜索</p>
        <ul>

          <li v-for="item in hotsea">
           {{item}}
          </li>
        </ul>
      </div>
      <div class="guanggao" v-show="isShow">
         <span class="ss1">广告</span>
         <img src="../img/gb.png" alt="" @click="close">

      </div>
      <div class="histroy">
        <p>
          <span class="s1">搜索历史</span>
          <span class="s2"><img src="../img/delete.png" alt=""></span>
        </p>
        <ul>
          <li>
            我和我的祖国
          </li>
          <li>
            我和我的祖国
          </li>
          <li>
            我和我
          </li> <li>
          我和我的祖国
        </li> <li>
          我和我的祖国
        </li> <li>
          我和我的祖国
        </li>
          <li>
            我和我的祖国
          </li>
          <li>
            我和我的祖国
          </li>
          <li>
            我和我的祖国
          </li>
        </ul>
      </div>
      <div class="searchlist" v-show="sIsShow">
        <p>搜索 "海阔天空"</p>
        <ul>
          <li v-for="item in slist">
            <p>
              <img src="../img/sblack.png" alt="">
              <span class="stext">{{item}}</span>
            </p>

          </li>
        </ul>
      </div>
    </div>

</template>

<script>

    export default {
        name: "search",
      data(){
          return{
            isShow:true,
            hotsea:[],
            value:'',
            slist:[],
            sIsShow:false,
          }
      },
      methods:{
        close(){
          this.isShow=false;
        },
        onCancel(){
          this.$router.push({path:'/index'})
        },

        seachr(){
          this.sIsShow=true;
          if(this.value.length===0){
            this.slist.splice(0,this.slist.length);
            this.sIsShow=false;
          }else {
            this.slist.splice(0,this.slist.length);
            this.$http.get(`http://localhost:3000/search/suggest?keywords= ${this.value}&type=mobile`)
              .then((res)=>{
                if(res.data.result.allMatch === undefined){
                  this.slist.push('没有搜索到此内容');
                }else {
                  for(let i = 0; i < res.data.result.allMatch.length; i ++){
                    this.slist.push(res.data.result.allMatch[i].keyword);
                  }
                }
              })
          }

        }
      },
      beforeRouteLeave(to,from,next){
        console.log(123);
        this.$dialog.confirm({
          title:'温馨提示',
          message:'你确定不搜索吗?',
        })
          .then(()=>{
            next();
          })
          .catch((err)=>{
            console.log(err);
            next(false);
          });
      },
      created(){
          this.$http.get('http://localhost:3000/search/hot/detail')
            .then((res)=>{
              for(let i = 0; i < 9; i ++){
                this.hotsea.push(res.data.data[i].searchWord);
              }
            })
            .catch((err)=>{
              console.log(err);
            })
      }
    }
</script>

<style lang="scss">
*{
  margin: 0px;
  padding: 0px;
}
  .searchhot{
    width: 1245px;
    position: absolute;
    z-index: -1;
    .search{

      padding-top: 80px;
      padding-bottom: 20px;
      box-sizing: border-box;
      background-color: #c44a3d;
      .vants{
        padding-bottom: unset;
        padding-top: unset;
        .van-search__content{
          background-color: #d06c62;
        }
      }
      .quxiao{
        color: white;
      }
    }

    .angeshou{
      height: 150px;
      position: relative;
      border-bottom: 2px solid #ccc;

      .s1{
        display: inline-block;
        line-height: 150px;
        font-size: 46px;
        font-weight: bold;
        box-sizing: border-box;
        padding-left: 32px;

        .ic{
          vertical-align: middle;
        }
        span{
          vertical-align: middle;
        }
      }
      .s2{
        display: inline-block;
        position: absolute;
        right: 30px;
       margin-top: 35px;
        span{
          display: inline-block;
          width: 80px;
          height: 80px;
          border-radius:50% ;
          background-color: aqua;
        }
        .si{
          position: relative;
          right: 30px;
          background-color: red;
        }
        .ss{
          position: relative;
          right: 60px;
          background-color:bisque;
        }
      }
    }
    .hot{
        box-sizing: border-box;
      padding: 0 30px;
      margin-bottom: 40px;
      p{
       margin-top: 60px;
        font-size: 40px;
        font-weight: bold;
        margin-bottom: 45px;
      }
      ul{
        li{
          list-style: none;
          display: inline-block;
          margin-bottom: 20px;
          background-color: #efeff0;
          font-size: 40px;
          border-radius:60px;
          margin-right: 25px;
          padding: 27px 40px;
        }
      }
    }
    .guanggao{
      position: relative;
      width: 1185px;
      margin: 0 auto;
      height: 180px;
      box-sizing: border-box;
      background-color: aquamarine;

        .ss1{
          font-size: 30px;
          color: white;
          vertical-align: middle;
          position: absolute;
          top: 20px;
          left: 20px;
        }


          img{
            position: absolute;
            right: 40px;
            top: 20px;
            vertical-align: middle;
            width: 50px;
          }

      }
    .histroy{
      margin-top: 110px;
      padding: 0 30px;
      p{
        position: relative;
        margin-bottom: 45px;
        .s1{
          font-size: 40px;
          font-weight: bold;
          vertical-align: middle;
        }
        .s2{ position: absolute;
          right: 30px;
          vertical-align: middle;
          img{
            width: 52px;
            vertical-align: middle;

          }
        }
      }
      ul{
        li{
          list-style: none;
          display: inline-block;
          margin-bottom: 20px;
          background-color: #efeff0;
          font-size: 40px;
          border-radius:60px;
          margin-right: 25px;
          padding: 27px 40px;
        }
      }
    }
    }

.searchlist{
  background-color: white;
  width: 800px;
  position: absolute;
  top: 240px;
  z-index: 999;

  margin-left: 130px;


  p{
    text-indent: 25px;
    font-size: 35px;
    color: #3da4ff;
    box-sizing: border-box;
    padding: 25px 0;
    border-bottom: 1px solid #c9c9c9;
  }
  ul{
    li{
      list-style: none;
      text-indent: 25px;
      position: relative;
      border-bottom: 1px solid #c9c9c9;
      p{
        padding: 15px 0;
        border-bottom: none;
      }
      img{
        width:50px;
        height: 50px;
        vertical-align: middle;
      }
      .stext{
        padding-left: 15px;
        font-size: 30px;
        box-sizing: border-box;
        vertical-align: middle;
        color: #ccc9c9;
      }
    }
  }
}
</style>
